import React, { useEffect, useState } from 'react'

import { useParams, useLocation, useNavigate } from 'react-router'

import { getDetail } from '../../api/detail'
import { Skeleton, Swiper, Image, ImageViewer, Mask, Button } from 'antd-mobile'

import {PlayOutline} from 'antd-mobile-icons'

import './index.scss'


export default function Inedx() {

  const r = React.createRef()

  // useParams 是用来接收通过 url 传递的参数
  const params = useParams()
  // useLocation 是用来接收通过 state 传递参数
  const location = useLocation()
  const navigate = useNavigate()

  // 创建详情数据
  const [proDetail, setProDetail] = useState(null)

  // 用来决定是否显示视频播放
  const [visible2, setVisible2] = useState(false)

  

  useEffect(() => {
    
    // 获取详情页面的数据
    getDetail(params.proid).then(res => {

      // 将字符串通过 , 逗号拆分为数组
      res.data.banners = res.data.banners[0].split(',')
      // console.log(res);

      setTimeout(() => {
        setProDetail(res.data)
      }, 500)
      
    })
  }, [])


  return (
    <div className='box'>
      <header className='header'>
        <span style={{ float: 'left', paddingLeft: '15px' }} onClick={() => {
          // 返回前一个页面
          navigate(-1)
        }}>返回</span>
        详情
      </header>

      <div className='content'>

        {
          proDetail
            ?
            (<>
              <Swiper 
              style={{
                height: 350,
                '--adm-color-primary': '#f66'
              }} autoplay loop>
                {proDetail.banners.map((item, index) => {
                  return (<Swiper.Item 
                  key={index}
                  onClick={()=>{
                    // 点击轮播图要打开图片预览功能
                    ImageViewer.Multi.show({ images: proDetail.banners, defaultIndex: index })
                  }}
                  >
                    <Image style={{ height: 350 }} src={item} />
                  </Swiper.Item>)
                })}
              </Swiper>

              <PlayOutline fontSize={20} className='play' onClick={()=>{
                setVisible2(true)
              }} />

              <Mask visible={visible2} onMaskClick={() => setVisible2(false)}>
                <video className='my-video' autoplay={true} controls src='https://jvod.300hu.com/vod/product/2c13df8e-f7aa-489b-8b06-e7ef0439cf48/1460b9b5c0804fe7bec6ae0e5ddfbd0a.mp4'></video>
              </Mask>


              
              

              {/* 显示其他详情内容 */}
              <div className='detail_main'>
                <h2>{proDetail.proname}</h2>
                <p>价格： <span style={{color: 'red'}}>{proDetail.originprice}</span> </p>
                <p>品牌： {proDetail.brand}</p>
                <p>分类： {proDetail.category}</p>
                <p>描述： {proDetail.desc}</p>
              </div>

              {/* 加入购物车，客服按钮的创建 */}
              <div className='detail_footer'>
                <Button size='mini' color='primary'>加入购物车</Button>
                <Button size='mini' color='success'>联系客服</Button>
              </div>

            </>) :
            (<div style={{ padding: 20 }}>
              <h4>数据内容加载中</h4>
              <Skeleton.Title animated />
              <Skeleton.Paragraph lineCount={5} animated />

              <h4>数据内容加载中</h4>
              <Skeleton.Title animated />
              <Skeleton.Paragraph lineCount={8} animated />
            </div>)
        }



      </div>
    </div>
  )

}
